<template>
  <div class="app-main-container">
    <div
      class="edit-entrance"
      style="
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
      "
    >
      <div class="property-title">{{ $t("message.kjrk") }}</div>
      <div class="initial-config" @click="entranceManager">
        <img
          :src="manager"
          alt=""
          class="cnfig-icon"
          style="vertical-align: middle"
        />
      </div>
    </div>
    <div class="entrance-list">
      <div
        v-for="(item, index) in entranceList"
        :key="index"
        class="entrance-item"
        @click="clickItem(item)"
      >
        <img :src="item.imgPath" alt="" class="icon" />
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="data-show">
      <div v-for="(item, index) in dataShow" :key="index" class="item">
        <div class="title">{{ item.title }}</div>
        <div class="unit-money">
          <div v-if="item.unit" class="unit">
            {{ item.unit }}
            <span class="num">{{ item.unitNum }}</span>
          </div>
          <div class="money">
            {{ $t("message.rmbfh") }}<span class="num">{{ item.money }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="charts-box">
      <div class="chart-area-booking-box">
        <div class="ab_btn" @click="areaSubscribe">
          {{ $t("message.yuding") }}
        </div>
        <div class="chart-title flex-cb">
          <div>
            <div class="title">{{ $t("message.jrcdyd") }}</div>
            <el-select v-model="selectProName" @change="conditionChange">
              <el-option
                v-for="item in projects"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="flex-c">
          <canvas ref="canvas" class="canvas" width="200" height="200" />
          <!-- <img style="width: 250px" src="https://5b0988e595225.cdn.sohucs.com/images/20200504/cc14d246006e47d68da57176b16c41cc.gif" alt=""> -->
          <div ref="chartAreaBooking" class="chart-area-booking" />
        </div>
      </div>
      <div class="chart-combo-sell-box">
        <div class="ab_btn" @click="mealSale">{{ $t("message.shoumai") }}</div>
        <div class="chart-title flex-cb">
          <div class="title">{{ $t("message.jrtcsm") }}</div>
          <!-- <div>
            <el-button type="text" @click="mealSale">{{ $t('message.shoumai') }}</el-button>
            <el-button type="text" @click="moreMealList">{{ $t('message.more') }}</el-button>
          </div> -->
        </div>
        <div ref="chartComboSell" class="chart-combo-sell" />
      </div>
      <div class="chart-tickets-sell-box">
        <div class="ab_btn" @click="ticketSale">
          {{ $t("message.shoumai") }}
        </div>
        <div class="chart-title flex-cb">
          <div>
            <div class="title">{{ $t("message.jrmp") }}</div>
          </div>
          <!-- <div>
            <el-button type="text" @click="ticketSale">{{ $t('message.shoumai') }}</el-button>
          </div> -->
        </div>
        <div ref="chartTicketsSell" class="chart-tickets-sell" />
      </div>
    </div>
    <el-dialog
      :title="$t('message.kjrkgl')"
      :visible.sync="showEntranceManager"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :before-close="cancelMotify"
      width="850px"
    >
      <div class="placeholder9 mb10">
        {{ $t("message.zdykjrksm") }}
      </div>
      <Draggable
        v-model="showEntranceList"
        class="Entr_list_warp"
        draggable=".item"
      >
        <div v-for="item in showEntranceList" :key="item.id" class="item">
          <img class="img" :src="item.imgPath" alt="" />
          <el-input
            v-model="item.name"
            show-word-limit
            :maxlength="$i18n.locale === 'ZH' ? 5 : 30"
          />
          <el-checkbox v-model="item.sel" class="checkbox" />
          <img class="drag" src="@/assets/icon/drag.png" />
        </div>
      </Draggable>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMotify">{{ $t("message.qx") }}</el-button>
        <el-button
          v-preventReClick
          :loading="EntranceLoading"
          type="primary"
          @click="confirmMotify"
          >{{ $t("message.qr") }}</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showEnterWriteOff"
      width="60%"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="closeWriteOff"
    >
      <div slot="title">
        <span>{{ fastTitle }}</span>
        <span
          class="primaryColor ml10 underline pointer"
          @click="outinRecord"
          >{{ $t("message.crcjl") }}</span
        >
      </div>
      <el-form
        ref="enterWriteOffFrom"
        :model="enterWriteOffFrom"
        :rules="rules"
        label-suffix="："
        label-width="auto"
      >
        <el-form-item :label="$t('message.emwhx')" prop="code">
          <div class="enterWriteOffCode">
            <el-input
              ref="qrcodeRef"
              v-model="enterWriteOffFrom.code"
              :placeholder="$t('message.qsmsrewmnr')"
              style="flex: 1"
              clearable
              :disabled="enterWriteOffFrom.name ? true : false"
              @input="codeChange"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.hyhx2')" prop="name">
          <el-autocomplete
            v-model="enterWriteOffFrom.name"
            :fetch-suggestions="queryMemberAsync"
            style="width: 100%"
            :placeholder="$t('message.qsrhystkhsjh')"
            :disabled="enterWriteOffFrom.code ? true : false"
            clearable
            @select="handleMemberSelect"
          />
        </el-form-item>
      </el-form>
      <div v-if="TicketAbleResult" class="verificat_info_wrap">
        <h2>{{ $t("message.drkypj") }}</h2>
        <div class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="" />
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.code"
                class="info_item"
                :class="{ active: item.code === activeTicketItem.code }"
                @click="ticketItemClick(item)"
              >
                <h2>{{ item.name }}</h2>
                <div class="line">
                  <span v-if="item.areaName" class="6"
                    >{{ $t("message.sycd") }}：</span
                  >
                  <span v-if="item.areaName" class="mr10">{{
                    item.areaName
                  }}</span>
                  <span>{{ item.siteModelName }}</span>
                </div>
                <div class="line">
                  <span v-if="item.expirationTime" class="span6"
                    >{{ $t("message.dqrq") }}：<span class="primaryColor">{{
                      item.expirationTime
                    }}</span></span
                  >
                  <span v-if="item.useTime" class="span4"
                    >{{ $t("message.sysj") }}：{{ item.useTime }}</span
                  >
                </div>
                <div class="line">
                  <span v-if="item.itemName" class="span6"
                    >{{ $t("message.syxm") }}：{{ item.itemName }}</span
                  >
                  <template
                    v-if="item.residueDegree && item.residueDegree != '0/0'"
                  >
                    <span
                      v-if="
                        item.type == 41 || item.type == 32 || item.type == 42
                      "
                      class="span4"
                      >{{ $t("message.syqk") }}：
                      <template
                        v-if="
                          item.residueDegree.indexOf('/' + $t('message.bx')) > 0
                        "
                      >
                        {{ $t("message.rsbx") }}
                      </template>
                      <template v-else>
                        {{ $t("message.ysy") }}{{ item.residueDegree
                        }}{{
                          item.type == 41 || item.type == 42
                            ? $t("message.ci")
                            : $t("message.ren")
                        }}
                      </template>
                    </span>
                  </template>
                </div>
              </div>
            </template>
          </div>
          <div v-if="verificatInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic
                "
                :preview-src-list="[
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ verificatInfo.nickName }}</div>
                <div class="phone">{{ verificatInfo.phone }}</div>
              </div>
            </div>
            <div v-if="verificatInfo.realName" class="line">
              <span class="key">{{ $t("message.zsxm") }}：</span>
              {{ verificatInfo.realName }}
            </div>
            <div class="line">
              <span class="key">{{ $t("message.sex") }}：</span
              >{{
                verificatInfo.sex === "1"
                  ? $t("message.nan")
                  : verificatInfo.sex === "2"
                  ? $t("message.nv")
                  : $t("message.bm")
              }}
            </div>
            <div class="line">
              <span class="key">{{ $t("message.sfzh") }}：</span
              >{{ verificatInfo.identityNumber || "" }}
            </div>
            <div v-if="verificatInfo.number" class="line">
              <span class="key">{{ $t("message.hykh") }}：</span
              >{{ verificatInfo.number }}
            </div>
            <div v-if="verificatInfo.rechargeMoney" class="line">
              <span class="key">{{ $t("message.czje") }}：</span
              >{{ verificatInfo.rechargeMoney }}
            </div>
            <div v-if="verificatInfo.giveMoney" class="line">
              <span class="key">{{ $t("message.zsye") }}：</span
              >{{ verificatInfo.giveMoney }}
            </div>
            <div v-if="verificatInfo.integral" class="line">
              <span class="key">{{ $t("message.sfye") }}：</span
              >{{ verificatInfo.integral }}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="verificat_footer">
        <div
          v-if="TicketAbleResult && activeTicketItem.code"
          class="verificat_num_wrap df_ac"
        >
          <span
            v-if="
              activeTicketItem.type == '41' &&
              activeTicketItem.residueDegree != '0/0'
            "
            >{{ $t("message.hxcs") }}：</span
          >
          <el-input-number
            v-if="
              activeTicketItem.type == '41' &&
              activeTicketItem.residueDegree != '0/0'
            "
            v-model="verificatNum"
            class="ml20 mr30"
            size="medium"
            :min="1"
          />
          <el-checkbox v-model="verificatPrint" @change="changePrint">{{
            $t("message.dyxp")
          }}</el-checkbox>
        </div>
        <div />
        <div>
          <el-button @click="showEnterWriteOff = false">{{
            $t("message.qx")
          }}</el-button>
          <el-button
            type="primary"
            :loading="ticketLoading"
            @click="verificationCode"
            >{{ $t("message.qrhx") }}</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-drawer
      v-if="showMt"
      title="团购验券"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showMt"
      size="800px"
      @close="closeMt"
    >
      <el-form
        ref="mtForm"
        :model="mtForm"
        :rules="rules"
        label-suffix="："
        label-width="auto"
      >
        <el-form-item class="mt20" label="券码" prop="tgm">
          <div class="enterWriteOffCode">
            <el-input
              v-model="mtForm.tgm"
              :placeholder="$t('message.qsr') + $t('message.tgm')"
              style="flex: 1"
              clearable
            />
            <div style="width: 20px" />
            <el-button :loading="yzLoading" type="primary" @click="yzBtn"
              >查找</el-button
            >
            <el-button @click="qkBtn">清空</el-button>
          </div>
          <div class="member_info" v-if="qmList.length > 0">
            <span
              >当前可领门票<span style="color: red">
                {{ qmList.length || "-" }}</span
              >张:</span
            >
            <div class="member_box">
              <div
                class="member_item"
                v-for="(item, index) in qmList"
                :key="index"
              >
                <span class="title">{{ item.objName || "-" }}</span>
                <div v-if="item.type != 0">
                  <span>适用项目：</span>
                  <span>{{ item.useProject }}</span>
                </div>
                <div>
                  <span>适用时间：</span>
                  <span>{{ item.useTime }}</span>
                </div>
                <div class="tp" v-if="item.type == 0">套餐</div>
                <div class="tp" v-if="item.type == 1">普票</div>
                <div class="tp" v-if="item.type == 2">套票</div>
              </div>
            </div>
          </div>
        </el-form-item>
        <!-- v-if="qmList && qmList.length > 0 && ((qmList[0].type == 1) || (qmList[0].type == 2))" -->
        <el-form-item :label="$t('message.memberInfo')" prop="memberId">
          <div>
            <MemberSearch
              ref="memberSearchRef"
              @clear="tgMemberClear"
              @select="tgMemberSelect"
            />
            <div
              v-if="tgMemberInfo && tgMemberInfo.nickName"
              class="member_info"
            >
              <div class="item">
                {{ $t("message.name") }}：{{ tgMemberInfo.nickName }}
              </div>
              <div class="item">
                {{ $t("message.sjh") }}：{{ tgMemberInfo.phone }}
              </div>
              <div class="item">
                {{ $t("message.hydj") }}：{{ tgMemberInfo.cardName }}
              </div>
              <div class="item">
                {{ $t("message.czye") }}：<span>{{
                  tgMemberInfo.rechargeMoney || 0
                }}</span>
              </div>
              <div class="item">
                {{ $t("message.zsye") }}：<span>{{
                  tgMemberInfo.giveMoney || 0
                }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="detail">
          <div v-if="isShowMt">
            <template v-for="(item, index) in mtObj">
              <div :key="index" class="order-type">
                {{ item.name }}({{ item.couponTypeName }}) ({{
                  item.proTypeName
                }}) ({{ item.saleStatusName }})
              </div>
              <div v-if="item.showInfo" :key="index">
                {{ item.showInfo }}
              </div>
              <el-button
                v-if="item.proType == 1"
                :key="index"
                type="primary"
                @click="jumpBtn(item.code)"
                >{{ $t("message.qsy") }}</el-button
              >
            </template>
          </div>
          <div v-else class="error-style">{{ $t("message.cxbtgqcxsr") }}</div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer posi">
        <template style="float: left">
          <el-checkbox v-model="dyChecked">打印</el-checkbox>
        </template>
        <div>
          <el-button @click="closeMts">{{ $t("message.qx") }}</el-button>
          <el-button
            v-preventReClick
            type="primary"
            :loading="yzLoadings"
            @click="yzQmBtn"
            >确认</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!-- 扫码出餐 -->
    <el-drawer
      v-if="showTicket"
      :title="$t('message.smcc')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showTicket"
      size="800px"
      @close="closeTicket"
    >
      <el-form
        ref="mtForms"
        :model="mtForms"
        :rules="rules"
        label-suffix="："
        label-width="auto"
      >
        <el-form-item class="mt20" :label="$t('message.ewm')" prop="code">
          <div class="enterWriteOffCode">
            <el-input
              v-model="mtForms.code"
              @input="handleInputCode"
              :disabled="isInputDisabled"
              :placeholder="$t('message.qsr') + $t('message.ewm')"
              style="flex: 1"
              clearable
            />
          </div>
        </el-form-item>
        <el-form-item
          v-if="inputCodeVal == ''"
          :label="$t('message.memberInfo')"
          prop="memberId"
        >
          <div>
            <MemberSearch
              ref="memberSearchRef"
              @clear="tgMemberClear"
              @select="tgMemberSelects"
            />
            <div
              v-if="tgMemberInfo && tgMemberInfo.nickName"
              class="member_info"
            >
              <div class="item">
                {{ $t("message.name") }}：{{ tgMemberInfo.nickName }}
              </div>
              <div class="item">
                {{ $t("message.sjh") }}：{{ tgMemberInfo.phone }}
              </div>
              <div class="item">
                {{ $t("message.hydj") }}：{{ tgMemberInfo.cardName }}
              </div>
              <div class="item">
                {{ $t("message.czye") }}：<span>{{
                  tgMemberInfo.rechargeMoney || 0
                }}</span>
              </div>
              <div class="item">
                {{ $t("message.zsye") }}：<span>{{
                  tgMemberInfo.giveMoney || 0
                }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('message.ctmc')"
          v-if="tgMemberInfo.id"
          prop="goodsRestaurantId"
        >
          <el-select
            v-model="goodsRestaurantId"
            :placeholder="$t('message.qxz') + $t('message.ct')"
            @change="onlineChange"
          >
            <el-option
              v-for="item in ordingList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div
          v-if="ticketList.length == 0 && isDataLoaded"
          class="default_notickets"
        >
          <img
            style="width: 240px; height: 240px"
            src="@/assets/images/zw.png"
            alt=""
          />
        </div>
        <el-form-item style="margin-top: -20px">
          <div class="member_infos" v-if="Object.keys(ticketList).length > 0">
            <div class="member_boxs">
              <div
                class="member_item_box"
                :class="memberIndex == index ? 'member_active' : ''"
                v-for="(item, index) in ticketList"
                :key="item.orderId"
                @click="memberClick(index, item.orderId)"
              >
                <span
                  v-if="tgMemberInfo.id == '' || tgMemberInfo.id == undefined"
                  >{{ item.name }}</span
                >
                <span style="height: 20px !important"
                  >{{ $t("message.ddbh") }}：{{ item.orderId }}</span
                >
                <div class="member_item">
                  <div
                    style="height: 24px"
                    v-for="(items, index) in item.foodInfoList"
                    :key="index"
                  >
                    <span>{{ items.foodName }}：</span>
                    <span>*{{ items.num }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer posi">
        <template style="float: left">
          <span></span>
        </template>
        <div>
          <el-button @click="closeTicket">{{ $t("message.qx") }}</el-button>
          <el-button
            v-preventReClick
            type="primary"
            :loading="codeBtnLoading"
            @click="qrBtnTicket"
            >确认</el-button
          >
        </div>
      </div>
    </el-drawer>
    <VipAdd
      v-if="isShowVipAdd"
      ref="VipAddRef"
      @register="memberAdd"
      @close="isShowVipAdd = false"
    />
    <VipRecharge
      v-if="isShowVipRecharge"
      ref="VipRechargeRef"
      @close="isShowVipRecharge = false"
    />
    <MemberAdd
      v-if="isShowMemberAdd"
      ref="MemberAddRef"
      @submit="toVipAdd"
      @close="isShowMemberAdd = false"
    />
    <Bracelet ref="Bracelet" @success="jumpBracelet" />
    <ReleTicket ref="ReleTicketRef" @success="payBtn" />
    <orderDialog ref="child" />
    <Unbinding ref="Unbinding" />
    <Application
      v-if="ShowApplication"
      ref="Application"
      @close="ShowApplication = false"
    />
    <Signin ref="Signin" />
    <Orienteering
      v-if="showOrienteering"
      ref="OrienteeringRef"
      @close="showOrienteering = false"
    />
    <Parking v-if="showParking" ref="ParkingRef" @close="showParking = false" />
    <printTem v-if="isPrint" ref="printTemRef" />
    <PrintTable
      ref="PrintTableRef"
      @cancelDialog="cancelDialog"
      @printd="printd"
    />
    <el-dialog
      :visible.sync="showActivityWriteOff"
      width="60%"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="closeActivityWriteOff"
    >
      <div slot="title">
        <span>{{ fastTitle }}</span>
        <span
          class="primaryColor ml10 underline pointer"
          @click="outinRecordb"
          >{{ $t("message.bmjl") }}</span
        >
      </div>
      <el-form
        ref="enterWriteOffFrom"
        :model="enterWriteOffFrom"
        :rules="rules"
        label-suffix="："
        label-width="auto"
      >
        <el-form-item :label="$t('message.emwhx')" prop="code">
          <div class="enterWriteOffCode">
            <el-input
              ref="qrcodeRefb"
              v-model="enterWriteOffFrom.code"
              :placeholder="$t('message.qsmsrewmnr')"
              style="flex: 1"
              clearable
              :disabled="enterWriteOffFrom.name ? true : false"
              @input="codeChangeb"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.hyhx2')" prop="name">
          <el-autocomplete
            v-model="enterWriteOffFrom.name"
            :fetch-suggestions="queryMemberAsync"
            style="width: 100%"
            :placeholder="$t('message.qsrhystkhsjh')"
            :disabled="enterWriteOffFrom.code ? true : false"
            clearable
            @select="handleMemberSelectb"
          />
        </el-form-item>
      </el-form>
      <div v-if="TicketAbleResult" class="verificat_info_wrap">
        <h2>{{ $t("message.bmjl") }}</h2>
        <div class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="" />
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.code"
                class="info_item"
                :class="{ active: activeTicketList.indexOf(item.id) > -1 }"
                @click="ticketItemClickb(item)"
              >
                <h2>{{ item.acName }}</h2>
                <div v-if="item.studentName" class="line">
                  <span class="span6"
                    >{{ $t("message.bmxy") }}：<span class="primaryColor">{{
                      item.studentName
                    }}</span></span
                  >
                </div>
                <div v-if="item.acTime" class="line">
                  <span class="span6"
                    >{{ $t("message.hdsj") }}：<span class="primaryColor">{{
                      item.acTime
                    }}</span></span
                  >
                </div>
                <div v-if="item.acAddr" class="line">
                  <span class="span6"
                    >{{ $t("message.hddd") }}：{{ item.acAddr }}</span
                  >
                </div>
              </div>
            </template>
          </div>
          <div v-if="verificatInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic
                "
                :preview-src-list="[
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ verificatInfo.nickName }}</div>
                <div class="phone">{{ verificatInfo.phone }}</div>
              </div>
            </div>
            <div v-if="verificatInfo.realName" class="line">
              <span class="key">{{ $t("message.zsxm") }}：</span>
              {{ verificatInfo.realName }}
            </div>
            <div class="line">
              <span class="key">{{ $t("message.sex") }}：</span
              >{{
                verificatInfo.sex === "1"
                  ? $t("message.nan")
                  : verificatInfo.sex === "2"
                  ? $t("message.nv")
                  : $t("message.bm")
              }}
            </div>
            <div class="line">
              <span class="key">{{ $t("message.sfzh") }}：</span
              >{{ verificatInfo.identityNumber || "" }}
            </div>
            <div v-if="verificatInfo.number" class="line">
              <span class="key">{{ $t("message.hykh") }}：</span
              >{{ verificatInfo.number }}
            </div>
            <div v-if="verificatInfo.rechargeMoney" class="line">
              <span class="key">{{ $t("message.czje") }}：</span
              >{{ verificatInfo.rechargeMoney }}
            </div>
            <div v-if="verificatInfo.giveMoney" class="line">
              <span class="key">{{ $t("message.zsye") }}：</span
              >{{ verificatInfo.giveMoney }}
            </div>
            <div v-if="verificatInfo.integral" class="line">
              <span class="key">{{ $t("message.sfye") }}：</span
              >{{ verificatInfo.integral }}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="verificat_footer">
        <div />
        <div>
          <el-button @click="showActivityWriteOff = false">{{
            $t("message.qx")
          }}</el-button>
          <el-button
            type="primary"
            :loading="activityLoading"
            @click="verificationCodec"
            >{{ $t("message.qrhx") }}</el-button
          >
        </div>
      </div>
    </el-dialog>
    <EscortBuy
      v-if="showEscortBuy"
      ref="EscortBuy"
      @success="escordOrder"
      @close="showEscortBuy = false"
    />
    <EscortOff
      v-if="showEscortOff"
      ref="EscortOff"
      @close="showEscortOff = false"
    />
    <VerificationTem v-if="isPrint" ref="VerificationTemRef" />
  </div>
</template>

<script>
import {
  getProjectList,
  androidToken,
  workData,
  benchInfo,
  mealInfo,
  checkCouponByInput,
  workBenchList,
  myWorkBench,
  editMyWorkBench,
  getCheckCode,
  memberList,
  batchHXSign,
  memberDetailInfo,
  affirmCheckGetMeals,
  affirmCheckGetQm,
  affirmCheckGetTicket,
  affirmCheckGetYz,
  verificatList,
  signRecordList,
  jumpBracelet,
  printOrder,
  goodsRestaurantList2On,
  getCheckGetTicket, //扫码获取出餐信息
} from "@/api";
import store from "@/store";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";
import { getToken } from "@/utils/auth";
import Cookies from "js-cookie";
import { debounce } from "@/utils/debounce";
import VipAdd from "@/views/vipCard/vipAdd/index.vue";
import VipRecharge from "@/views/vipList/vipRecharge/index.vue";
import Bracelet from "./components/bracelet.vue";
import ReleTicket from "./components/releTicket.vue";
import orderDialog from "@/components/order";
import MemberAdd from "@/views/vipList/memberAdd/index.vue";
import Unbinding from "../vipList/associationList/components/unbinding.vue";
import MemberSearch from "@/components/MemberSearch";
import Application from "./components/application.vue";
import Signin from "./components/signin.vue";
import Parking from "./components/parking.vue";
import Orienteering from "./components/orienteering.vue";
import EscortBuy from "./components/escortBuy.vue";
import EscortOff from "./components/escortOff.vue";
import VerificationTem from "@/components/printTem/verification.vue";
import printTem from "@/components/printTem";
import PrintTable from "@/components/printTable.vue";
import Draggable from "vuedraggable";
export default {
  name: "Home",
  components: {
    VerificationTem,
    VipAdd,
    printTem,
    PrintTable,
    orderDialog,
    Unbinding,
    Parking,
    Bracelet,
    VipRecharge,
    ReleTicket,
    MemberAdd,
    MemberSearch,
    Application,
    Signin,
    EscortBuy,
    EscortOff,
    Draggable,
    Orienteering,
  },
  data() {
    return {
      goodsRestaurantId: "",
      fastTitle: "",
      showEscortBuy: false,
      showEscortOff: false,
      isShowVipAdd: false,
      activityLoading: false,
      isShowVipRecharge: false,
      isShowMemberAdd: false,
      ShowApplication: false,
      showOrienteering: false,
      showParking: false,
      yzLoading: false,
      modalDialog: store.getters.dialog,
      EntranceLoading: false,
      isPrint: false,
      tgMemberInfo: { id: "" },
      verificatInfo: {},
      activeTicketItem: {
        code: "",
      },
      activeTicketList: [],
      TicketAbleList: [],
      TicketAbleResult: false,
      ticketLoading: false,
      default_pic: require("@/icons/png/default_pic.png"),
      manager: require("@/icons/png/ic_guanli.png"),
      showMt: false,
      showTicket: false,
      mtForm: {},
      mtForms: {},
      entranceList: [
        {
          icon: require("@/icons/png/home_nav_vipcard.png"),
          name: this.$t("message.hykk"),
          path: "VipAdd",
        },
        {
          icon: require("@/icons/png/home_nav_changdi.png"),
          name: this.$t("message.cdyy"),
          path: "AreaReserve",
        },
        {
          icon: require("@/icons/png/home_nav_shangpingshoumai.png"),
          name: this.$t("message.spsm"),
          path: "GoodsSale",
        },
        {
          icon: require("@/icons/png/home_nav_menpiao.png"),
          name: this.$t("message.mpsm"),
          path: "TicketSell",
        },
        {
          icon: require("@/icons/png/home_nav_taocan.png"),
          name: this.$t("message.tcsm"),
          path: "ComboSell",
        },
        {
          icon: require("@/icons/png/home_nav_vipchongzhi.png"),
          name: this.$t("message.hycz"),
          path: "VipRecharge",
        },
      ],
      dataShow: [
        {
          title: this.$t("message.jrys"),
          money: "0.00",
          unit: "",
          unitNum: "0",
        },
        {
          title: this.$t("message.jrdc"),
          money: "0.00",
          unit: this.$t("message.dinchan"),
          unitNum: "0",
        },
        {
          title: this.$t("message.jrmp"),
          money: "0.00",
          unit: this.$t("message.goupiao"),
          unitNum: "0",
        },
        {
          title: this.$t("message.jrtc"),
          money: "0.00",
          unit: this.$t("message.dindan"),
          unitNum: "0",
        },
      ],
      // lastTime: 10,
      ticketsName: [],
      ticketSales: [],
      ticketLess: [],
      projects: [],
      ordingList: [],
      selectProName: "",
      benchInfo: {},
      meals: [],
      printList: [],
      showSqy: false,
      meaLyAxis: [],
      mealseries: [],
      showEntranceList: [],
      showEntranceManager: false,
      showEnterWriteOff: false, // 核销
      showActivityWriteOff: false,
      yzLoadings: false,
      verificatNum: 0,
      verificatPrint: false,
      codeBtnLoading: false,
      isShowMt: true,
      mtObj: [],
      enterWriteOffFrom: {
        code: "",
        name: "",
        detail: {},
      },
      rules: {
        tgm: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.tgm"),
            trigger: "blur",
          },
        ],
      },
      isChecked: true,
      qmList: [],
      ticketList: [],
      isDataLoaded: false, // 数据加载状态，初始为 false
      dyChecked: false,
      memberIndex: 0,
      memberOrder: "",
      isInputDisabled: false,
      debounceTimer: null,
      inputCodeVal: "",
    };
  },
  computed: {
    lastTime() {
      return Number(this.allDuration) - Number(this.reserveDuration);
    },
  },
  created() {
    console.log(this.tgMemberInfo.id, "555");
    const isPrint = localStorage.getItem("isPrint") || "";
    this.verificatPrint = isPrint === "true";
    this.getVenueWorkBenchList();
    this.getOrdingList();
  },
  mounted() {
    this.showSqy = false;
    const auth_code = this.$route.query.auth_code;
    this.auth_code = auth_code;
    this.getInitData();
    if (window.Android) {
      this.setCookie();
      Android.setVenueId(sessionStorage.getItem("venueId"));
      Android.setShopId(localStorage.getItem("shopId") || 1);
    }
  },
  methods: {
    setCookie() {
      androidToken({ param: {} }).then((res) => {
        Android.setCookie(res.record);
        return;
      });
    },
    handleInputCode(value) {
      this.inputCodeVal = value;
      if (value == "") {
        this.memberOrder = "";
        this.ticketList = [];
      }
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer); // 清除之前的定时器
      }
      this.debounceTimer = setTimeout(() => {
        this.yzBtnTicket(value);
      }, 1000);
    },
    memberClick(e, id) {
      this.memberIndex = e;
      this.memberOrder = id;
    },
    onlineChange() {
      this.memberIndex = 0;
      this.yzBtnTicket();
    },
    // 获取餐厅列表
    getOrdingList(item) {
      goodsRestaurantList2On({
        param: { type: 1, status: 1 },
      }).then((res) => {
        if (res.errorCode !== "000000") return;
        this.ordingList = res.recordList;
        // this.goodsRestaurantId = res.recordList[0].id
      });
    },
    cancelDialog() {
      this.isPrint = false;
    },
    // 手环
    jumpBracelet(braceletId) {
      jumpBracelet({ param: { braceletId } }).then((res) => {
        if (res.errorCode !== "000000") return;

        if (res.record.type === "1") {
          this.$refs.ReleTicketRef.show(braceletId);
        } else {
          this.$refs.Unbinding.show(res.record);
        }
      });
    },
    escordOrder(orderId) {
      this.$refs.child.continuePay(orderId, "escort");
    },
    closeMt() {
      this.isShowMt = true;
      this.qmList = [];
      this.mtObj = [];
      this.$refs.mtForm.resetFields();
    },

    closeTicket() {
      this.showTicket = false;
      this.qmList = [];
      this.ticketList = [];
      this.inputCodeVal = "";
      this.$refs.mtForms.resetFields();
      this.isDataLoaded = false;
    },
    // 590015
    closeMts() {
      this.showMt = false;
      this.mtObj = [];
      this.qmList = [];
      this.$refs.mtForm.resetFields();
    },
    // closeTicket () {
    //   this.showTicket = false
    //   this.qmList = []
    //   this.$refs.mtForms.resetFields()
    // },
    // 打印
    printTC(id) {
      this.isPrint = true;
      let code = "";
      this.qmList[0].type == "0" ? (code = "MEALSTPML") : (code = "TICKETTPML");
      console.log(code, "9");
      console.log(this.qmList[0].type, "3");
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem("venueId"),
          workId: id,
          templateCode: code,
          //   templateCode: 'MEALSTPML'
          //   templateCode: 'TICKETTPML'
        },
      })
        .then((res) => {
          if (
            res.record &&
            res.record.isPrint === "1" &&
            res.record.dataList &&
            res.record.dataList.length > 0
          ) {
            this.printList = res.record.dataList;
            if (res.record.dataList.length === 1) {
              res.record.dataList.forEach((item) => {
                this.$refs.printTemRef.obj = { ...item };
                setTimeout(() => {
                  this.$refs.printTemRef.print();
                }, 300);
                setTimeout(() => {
                  this.isPrint = false;
                }, 500);
              });
            } else {
              this.isPrint = false;
              this.$refs.PrintTableRef.showDetail(res.record);
            }
          } else {
            this.isPrint = false;
          }
        })
        .catch(() => {
          this.isPrint = false;
        });
    },
    printd(index) {
      this.isPrint = true;
      const arr = [...this.printList];
      setTimeout(() => {
        this.$refs.printTemRef.obj = { ...arr[index] };
      }, 300);
      setTimeout(() => {
        this.$refs.printTemRef.print();
      }, 500);
      setTimeout(() => {
        this.isPrint = false;
      }, 1000);
    },

    //
    // 点餐确认按钮
    qrBtnTicket() {
      console.log(this.mtForms.code, "1", this.tgMemberInfo.id);
      if (
        (this.mtForms.code == "" ||
          this.mtForms.code == null ||
          this.mtForms.code == undefined) &&
        this.ticketList.length == 0
      ) {
        return this.$message.warning(
          "请扫描/输入二维码或通过会员获取并使用可用取餐票据"
        );
      }
      //   if (this.tgMemberInfo.id) {
      //   } else {
      //     return this.$message.warning('请扫描/输入二维码或通过会员获取并使用可用取餐票据')
      //   }
      const that = this;

      this.$refs.mtForms.validate((v) => {
        if (v) {
          let orderId = "";
          if (this.memberOrder) {
            orderId = this.memberOrder;
          } else if (this.ticketList.length > 0) {
            orderId = this.ticketList[0].orderId;
          }
          that.codeBtnLoading = true;
          getCheckGetTicket({
            param: {
              goodsRestaurantId: this.goodsRestaurantId,
              code: that.mtForms.code,
              memberId: that.tgMemberInfo.id,
              orderId: orderId,
              venueId: sessionStorage.getItem("venueId"),
            },
          })
            .then((res) => {
              that.codeBtnLoading = false;
              if (res.errorCode === "000000") {
                that.$message.success("出餐成功");
                this.yzBtnTicket("flag");
                this.inputCodeVal = "";
                this.memberOrder = "";
                this.mtForms.code = "";
                this.ticketList = [];
                this.memberIndex = 0;
              }
            })
            .catch(() => {
              that.codeBtnLoading = false;
            });
        }
      });
    },
    yzBtnTicket(e) {
      const that = this;
      this.$refs.mtForms.validate((v) => {
        if (v) {
          that.yzLoading = true;
          affirmCheckGetTicket({
            param: {
              //   code: that.mtForm.tgm,
              //   num: 1,
              goodsRestaurantId: this.goodsRestaurantId,
              code: that.mtForms.code,
              memberId: that.tgMemberInfo.id,
              venueId: sessionStorage.getItem("venueId"),
            },
          })
            .then((res) => {
              that.yzLoading = false;
              if (res.errorCode === "000000") {
                this.isDataLoaded = true;
                this.ticketList = res.recordList || [];
                if (e != "flag") {
                  //   that.$message.success('操作成功')
                }
              } else {
                this.ticketList = [];
                this.isDataLoaded = true;
              }
            })
            .catch(() => {
              that.yzLoading = false;
              this.ticketList = [];
            });
        }
      });
    },
    yzBtn() {
      const that = this;
      this.$refs.mtForm.validate((v) => {
        if (v) {
          that.yzLoading = true;
          affirmCheckGetQm({
            param: {
              code: that.mtForm.tgm,
              //   num: 1,
              //   memberId: that.tgMemberInfo.id,
              venueId: sessionStorage.getItem("venueId"),
            },
          })
            .then((res) => {
              that.yzLoading = false;
              if (res.errorCode === "000000") {
                this.qmList = res.recordList;
                that.$message.success("查找成功");
              }
            })
            .catch(() => {
              that.yzLoading = false;
            });
        }
      });
    },
    yzQmBtn() {
      const that = this;
      if (this.qmList && this.qmList.length > 0 && this.qmList[0].type == "0") {
        console.log("this.qmList[0].type", that.tgMemberInfo.id);
        if (
          that.tgMemberInfo.id == "" ||
          that.tgMemberInfo.id == undefined ||
          that.tgMemberInfo.id == null
        ) {
          that.$message.warning("请选择会员");
          return;
        }
      }
      this.$refs.mtForm.validate((v) => {
        if (v) {
          that.yzLoadings = true;
          affirmCheckGetYz({
            param: {
              code: that.mtForm.tgm,
              num: 1,
              memberId: that.tgMemberInfo.id,
              venueId: sessionStorage.getItem("venueId"),
            },
          })
            .then((res) => {
              that.yzLoadings = false;
              if (res.errorCode === "000000") {
                this.showMt = false;
                if (this.dyChecked) {
                  this.printTC(res.record.orderId);
                }
                this.qmList = [];
                that.$message.success(this.$t("message.yjcg"));
              }
            })
            .catch(() => {
              that.yzLoadings = false;
            });
        }
      });
    },
    tgMemberSelect(item) {
      const fn = () => {
        this.tgMemberInfo = item;
        // this.$set(this.param, 'memberId', item.id)
      };
      fn();
    },
    tgMemberSelects(item) {
      this.tgMemberInfo.id = "";
      console.log(this.tgMemberInfo.id, "6664554");
      this.isInputDisabled = true;
      this.ticketList = [];
      this.goodsRestaurantId = "";
      const fn = () => {
        console.log("item", item);
        this.tgMemberInfo = item;
        // this.$set(this.param, 'memberId', item.id)
      };
      fn();
    },
    tgMemberClear() {
      this.tgMemberInfo = {};
      this.isInputDisabled = false;
      this.ticketList = [];
      this.goodsRestaurantId = "";
      this.memberIndex = 0;
    },
    payBtn(row) {
      this.$refs.child.continuePay(row, "bracelet");
    },
    // 手环结束
    areaSubscribe() {
      this.$router.push({ name: "AreaReserve" });
    },
    // formatString(str) {
    //   return str.replaceAll('/', ' | ')
    // },
    memberAdd(value) {
      // this.$router.push({ name: 'MemberAdd' })
      this.isShowMemberAdd = true;
      this.$nextTick(() => {
        this.$refs.MemberAddRef.param.phone = value || "";
        this.$refs.MemberAddRef.isShowMember = true;
      });
    },
    toVipAdd(info) {
      this.isShowVipAdd = true;
      this.$nextTick(() => {
        this.$refs.VipAddRef.isShow = true;
        if (info) {
          this.$refs.VipAddRef.memberSelect(info);
        }
      });
    },
    queryMemberAsync(queryString, cb) {
      const data = {
        pagination: {
          firstQueryTime: "",
          page: 1,
          rows: 100,
        },
        param: {
          keyword: queryString,
        },
      };
      memberList(data).then((res) => {
        if (res.errorCode !== "000000") return;
        const result = res.recordList;
        this.verificatInfo = {};
        this.TicketAbleList = [];
        result.forEach((item) => {
          item.value = item.nickName;
          if (item.phone) {
            item.value += "-" + item.phone;
          }
          if (item.cardName) {
            item.value += "（" + item.cardName + "）";
          }
        });
        cb(result);
      });
    },
    codeChangeb: debounce(function () {
      this.verificatInfo.id = "";
      this.TicketAbleList = [];
      this.TicketAbleResult = false;
      this.verificatNum = 1;
      // this.activeTicketItem = {}
      this.activeTicketList = [];
      signRecordList({
        param: { acCode: this.enterWriteOffFrom.code, status: "0" },
      }).then((res) => {
        if (res.errorCode === "000000" && res.recordList.length > 0) {
          this.TicketAbleResult = true;
          this.$nextTick(() => {
            if (res.recordList.length > 0) {
              // this.activeTicketItem = res.recordList[0]
              this.activeTicketList = [res.recordList[0].id];
            }
            this.TicketAbleList = res.recordList || [];
          });
        } else {
          this.TicketAbleResult = true;
        }
      });
    }, 500),
    codeChange: debounce(function () {
      this.verificatInfo.id = "";
      this.TicketAbleList = [];
      this.TicketAbleResult = false;
      this.verificatNum = 1;
      this.activeTicketItem = {};
      verificatList({ param: { code: this.enterWriteOffFrom.code } }).then(
        (res) => {
          if (res.errorCode === "000000" && res.recordList.length > 0) {
            this.TicketAbleResult = true;
            this.$nextTick(() => {
              if (res.recordList.length > 0) {
                this.activeTicketItem = res.recordList[0];
              }
              this.TicketAbleList = res.recordList || [];
            });
          } else {
            this.TicketAbleResult = true;
          }

          // this.enterWriteOffFrom.detail = res.recordList[0]
        }
      );
    }, 500),
    // },
    handleMemberSelectb(item) {
      const { id } = item;
      this.verificatInfo.id = "";
      this.TicketAbleList = [];
      this.TicketAbleResult = false;
      // this.activeTicketItem = {}
      this.activeTicketList = [];
      this.verificatNum = 1;
      memberDetailInfo({ param: { memberId: id } }).then((res) => {
        if (res.errorCode !== "000000") return;
        this.verificatInfo = res.record;
        signRecordList({
          param: { userInfo: res.record.phone, status: "0" },
        }).then((resb) => {
          if (resb.errorCode !== "000000") return;
          this.TicketAbleResult = true;
          this.$nextTick(() => {
            this.TicketAbleList = resb.recordList;
            if (resb.recordList.length > 0) {
              this.activeTicketList = [resb.recordList[0].id];
              // this.activeTicketItem = resb.recordList[0]
            }
          });
        });
      });
    },
    handleMemberSelect(item) {
      const { id } = item;
      this.verificatInfo.id = "";
      this.TicketAbleList = [];
      this.TicketAbleResult = false;
      this.activeTicketItem = {};
      this.verificatNum = 1;
      memberDetailInfo({ param: { memberId: id } }).then((res) => {
        if (res.errorCode !== "000000") return;
        this.verificatInfo = res.record;
        verificatList({ param: { memberId: id } }).then((resb) => {
          if (resb.errorCode !== "000000") return;
          this.TicketAbleResult = true;
          this.$nextTick(() => {
            this.TicketAbleList = resb.recordList;
            if (resb.recordList.length > 0) {
              this.activeTicketItem = resb.recordList[0];
            }
          });
        });
      });
    },
    ticketItemClick(item) {
      this.verificatNum = 1;
      this.activeTicketItem = item;
      console.log(this.activeTicketItem);
    },
    ticketItemClickb(item) {
      const arr = [...this.activeTicketList];
      const index = arr.indexOf(item.id); // 找到要删除的元素的索引
      if (index !== -1) {
        // 确保元素存在于数组中
        arr.splice(index, 1); // 删除一个元素
      } else {
        arr.push(item.id);
      }
      this.activeTicketList = arr;
    },
    sqBtn() {
      // this.showSqy = true
      window.location.href =
        "https://e.dianping.com/dz-open/merchant/auth?app_key=2bfda436de2798fe&redirect_url=https://franchise-public-dev.kidsplace.cn/home&state=teststate&scope=[%22tuangou%22,%22ugc%22]";
    },
    closeSqy() {
      this.showSqy = false;
    },
    mealSale() {
      this.$router.push({ name: "ComboSell" });
    },
    moreMealList() {
      this.$router.push({ name: "ComboOrderList" });
    },
    ticketSale() {
      this.$router.push({ name: "TicketSell" });
    },
    conditionChange() {
      this.getBenchInfo(this.selectProName);
    },
    getInitData() {
      workData({
        param: {
          stadiumId: sessionStorage.getItem("venueId"),
        },
      })
        .then((res) => {
          if (res.errorCode === "000000") {
            const total = this.dataShow[0];
            total.money = res.record.totalMoney;
            this.dataShow[0] = total;
            const gather = res.record.orderType;
            gather.forEach((item) => {
              switch (item.name) {
                case "02": {
                  const subscribe = this.dataShow[1];
                  subscribe.money = item.price;
                  subscribe.unitNum = item.num;
                  this.dataShow[1] = subscribe;
                  break;
                }
                case "03": {
                  const ticket = this.dataShow[2];
                  ticket.money = item.price;
                  ticket.unitNum = item.num;
                  this.dataShow[2] = ticket;
                  break;
                }
                case "04": {
                  const meal = this.dataShow[3];
                  meal.money = item.price;
                  meal.unitNum = item.num;
                  this.dataShow[3] = meal;
                  break;
                }
                default: {
                  break;
                }
              }
            });
            const tickets = res.record.tickList;
            tickets.forEach((ticket) => {
              this.ticketsName.push(ticket.name);
              this.ticketSales.push(ticket.xl);
              this.ticketLess.push(ticket.yl);
            });
            this.renderChartTicketsSell();
          }
        })
        .catch((err) => {
          console.log("--失败", err);
        });
      const venueId = sessionStorage.getItem("venueId");
      getProjectList({
        param: {
          venueId,
          type: "0",
          status: "1",
        },
      }).then((res) => {
        if (res.errorCode !== "000000") return;
        this.projects = res.recordList;
        if (res.recordList.length > 0) {
          this.selectProName = res.recordList[0].id;
          // this.activeProject = res.recordList[0].id
          // this.toGetAreaListByProjectId(res.recordList[0].id)
          this.getBenchInfo(this.selectProName);
        }
      });
      mealInfo({ param: { venueId } }).then((res) => {
        if (res.errorCode !== "000000") return;
        this.meals = res.record;
        res.record.forEach((meal) => {
          this.meaLyAxis.push(meal.name);
          this.mealseries.push(Number(meal.num));
        });
        this.renderChartComboSell();
      });
    },
    getVenueWorkBenchList() {
      const param = { id: sessionStorage.getItem("userId") };
      myWorkBench({ param, userId: sessionStorage.getItem("userId") }).then(
        (res) => {
          if (res.errorCode !== "000000") return;
          this.entranceList = res.recordList;
        }
      );
    },
    getBenchInfo(id) {
      benchInfo({ param: { id } }).then((res) => {
        if (res.errorCode !== "000000") return;
        this.benchInfo = res.record;
        this.canvasRender();
        this.renderChartAreaBooking();
        // console.log( Number(this.benchInfo.allDuration) -  Number(this.benchInfo.reserveDuration));
      });
    },
    clickItem(item) {
      const { path } = item;
      this.isPrint = false;
      if (path === "SpecialCard") {
        this.showOrienteering = true;
        this.$nextTick(() => {
          this.$refs.OrienteeringRef.isShowModal = true;
        });
        return;
      }
      if (path === "Parking") {
        this.showParking = true;
        this.$nextTick(() => {
          this.$refs.ParkingRef.isShowModal = true;
        });
        return;
      }
      if (path === "EnterWriteOff") {
        this.showEnterWriteOff = true;
        this.enterWriteOffCode = {};
        this.fastTitle = item.name;
        this.$nextTick(() => {
          this.$refs.qrcodeRef.focus();
        });
        return;
      }
      if (path === "ActivityWriteOff") {
        this.showActivityWriteOff = true;
        this.activeTicketList = [];
        this.enterWriteOffCode = {};
        this.fastTitle = item.name;
        this.$nextTick(() => {
          this.$refs.qrcodeRefb.focus();
        });
        return;
      }
      if (path === "InvoiceMember") {
        this.$router.push("/application/invoice");
        return;
      }
      if (path === "MtCheck") {
        this.showMt = true;
        this.fastTitle = item.name;
        this.tgMemberClear();
        this.mtForm = {};
        return;
      }
      //   扫码出餐
      if (path === "GetFoodByCode") {
        this.showTicket = true;
        this.fastTitle = item.name;
        this.tgMemberClear();
        this.mtForms = {};
        return;
      }
      if (path === "Bracelet") {
        this.$refs.Bracelet.title = item.name;
        this.$refs.Bracelet.open();
        return;
      }
      if (path === "VipAdd") {
        this.isShowVipAdd = true;
        this.$nextTick(() => {
          this.$refs.VipAddRef.isShow = true;
        });
        return;
      }
      if (path === "CourseApply") {
        this.ShowApplication = true;
        this.$nextTick(() => {
          this.$refs.Application.title = item.name;
          this.$refs.Application.showClick();
        });
        return;
      }
      if (path === "CourseSignIn") {
        this.$nextTick(() => {
          this.$refs.Signin.title = item.name;
          this.$refs.Signin.open();
        });
        return;
      }
      if (path === "EscortBuy") {
        this.$nextTick(() => {
          this.showEscortBuy = true;
          this.$nextTick(() => {
            this.$refs.EscortBuy.title = item.name;
            this.$refs.EscortBuy.open();
          });
        });
        return;
      }
      if (path === "EscortOff") {
        this.$nextTick(() => {
          this.showEscortOff = true;
          this.$nextTick(() => {
            this.$refs.EscortOff.title = item.name;
            this.$refs.EscortOff.open();
          });
        });
        return;
      }
      if (path === "VipRecharge") {
        this.isShowVipRecharge = true;
        this.$nextTick(() => {
          this.$refs.VipRechargeRef.isShow = true;
          this.$refs.VipRechargeRef.param = {};
        });
        return;
      }
      this.$router.push({ name: path });
    },
    // 今日场地预定 图表初始化
    renderChartAreaBooking() {
      const chartAreaBooking = echarts.init(this.$refs.chartAreaBooking);
      chartAreaBooking.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "center",
          right: "center",
          orient: "vertical",
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            label: { show: false },
            labelLine: { show: false },
            data: [
              {
                value: Number(this.benchInfo.fixedDuration),
                name:
                  this.$t("message.yjcg") +
                  "：" +
                  Number(this.benchInfo.fixedDuration) +
                  this.$t("message.xiaoshi"),
              },
              {
                value: Number(this.benchInfo.pcDuration),
                name:
                  this.$t("message.qtyd") +
                  "：" +
                  Number(this.benchInfo.pcDuration) +
                  this.$t("message.xiaoshi"),
              },
              {
                value: Number(this.benchInfo.appDuration),
                name:
                  this.$t("message.wlyd") +
                  "：" +
                  Number(this.benchInfo.appDuration) +
                  this.$t("message.xiaoshi"),
              },
            ],
          },
        ],
      });
    },
    // 今日套餐售卖 图表初始化
    renderChartComboSell() {
      const chartComboSell = echarts.init(this.$refs.chartComboSell);
      chartComboSell.setOption({
        grid: {
          left: "80px",
          top: "0%",
          bottom: "20%",
          right: "60px",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          axisLine: { show: false },
          axisTick: { show: false },
          data: this.meaLyAxis,
        },
        series: [
          {
            data: this.mealseries,
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#59C9EB",
                label: {
                  show: true, // 开启显示
                  position: "right", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "black",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      });
    },
    // 今日门票 图表初始化
    renderChartTicketsSell() {
      const chartTicketsSell = echarts.init(this.$refs.chartTicketsSell);
      chartTicketsSell.setOption({
        grid: {
          left: "60px",
          top: "10px",
          bottom: "35%",
          right: "0px",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // return value.split('').join('\n')
              return value;
            },
          },
          data: this.ticketsName,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 130],
            data: this.ticketSales,
            type: "bar",
            name: this.$t("message.rxl"),
            barWidth: 210 / this.ticketSales.length,
            itemStyle: {
              color: "#435EBE",
            },
          },
          {
            // data: [110, 400, 120, 50, 40, 110, 100],
            data: this.ticketLess,
            type: "bar",
            name: this.$t("message.syps"),
            barWidth: 210 / this.ticketSales.length,
            itemStyle: {
              color: "#59C9EB",
            },
          },
        ],
      });
    },
    canvasRender() {
      var that = this;
      // console.log((Number(this.benchInfo.allDuration) - Number(this.benchInfo.reserveDuration)), this.benchInfo.reserveDuration)
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      const radians = (Math.PI / 180) * 180;
      let startTime = Date.now();
      const time = 2000;
      let clockwise = 1;
      const title =
        this.$t("message.sy") +
        (Number(that.benchInfo.allDuration) -
          Number(that.benchInfo.reserveDuration)) +
        this.$t("message.xiaoshi");
      let cp1x, cp1y, cp2x, cp2y;

      requestAnimationFrame(function waveDraw() {
        const t = Math.min(1.0, (Date.now() - startTime) / time);

        if (clockwise) {
          cp1x = 90 + 55 * t;
          cp1y = 28 + 72 * t;
          cp2x = 92 - 51 * t;
          cp2y = 179 - 79 * t;
        } else {
          cp1x = 145 - 55 * t;
          cp1y = 100 - 72 * t;
          cp2x = 41 + 51 * t;
          cp2y = 100 + 79 * t;
        }

        ctx.clearRect(0, 0, 200, 200);
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "#435EBE";
        ctx.fill();
        // 设置字体
        ctx.font = "16px bold 黑体";
        ctx.fillStyle = "#333333";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(title, 100, 50);
        ctx.font = "16px bold 黑体";
        ctx.fillStyle = "#fff";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(
          that.$t("message.yyd") +
            that.benchInfo.reserveDuration +
            that.$t("message.xiaoshi"),
          100,
          150
        );
        ctx.save();
        // eslint-disable-next-line eqeqeq
        if (t == 1) {
          startTime = Date.now();
          clockwise = !clockwise;
        }
        // requestAnimationFrame(waveDraw)
      });
    },
    entranceManager() {
      this.showEntranceManager = true;
      const param = { id: sessionStorage.getItem("userId") };
      workBenchList({ param, userId: sessionStorage.getItem("userId") }).then(
        (res) => {
          if (res.errorCode === "000000") {
            this.showEntranceList = res.recordList.map((item) => {
              item.isEdit = false;
              item.sort = item.sort || 99999999;
              return item;
            });
            this.showEntranceList.sort((a, b) => a.sort - b.sort);
            this.$nextTick(() => {
              this.$refs.EntranceManagerRef.doLayout();
            });
          }
        }
      );
    },
    handleEdit(index, row) {
      row.sel = !row.sel;
    },
    handleDelete(index, row) {
      row.sel = !row.sel;
    },
    cancelMotify() {
      this.showEntranceManager = false;
    },
    confirmMotify() {
      if (!this.showEntranceList) {
        this.$message.warning(this.$t("message.zwkrrksj"));
        return;
      }
      const paramList = [];
      // var count = 0
      this.showEntranceList.forEach((entrance) => {
        if (entrance.sel === true) {
          paramList.push({
            id: entrance.id,
            name: entrance.name,
          });
          // count++
        }
      });
      this.EntranceLoading = true;
      editMyWorkBench({
        param: { paramList },
        userId: sessionStorage.getItem("userId"),
      }).then(
        (res) => {
          this.EntranceLoading = false;
          if (res.errorCode === "000000") {
            this.showEntranceManager = false;
            this.$message.success(this.$t("message.editcg"));
            this.getVenueWorkBenchList();
          }
        },
        () => {
          this.EntranceLoading = false;
        }
      );
    },
    closeActivityWriteOff() {
      this.verificatInfo = {};
      this.enterWriteOffFrom = {};
      this.TicketAbleList = [];
      this.TicketAbleResult = false;
      this.activeTicketItem = {};
      this.showActivityWriteOff = false;
    },
    closeWriteOff() {
      this.verificatInfo = {};
      this.enterWriteOffFrom = {};
      this.TicketAbleList = [];
      this.TicketAbleResult = false;
      this.activeTicketItem = {};
      this.isChecked = true;
      this.showEnterWriteOff = false;
    },
    closeMt() {
      this.isShowMt = true;
      this.mtObj = [];
      this.$refs.mtForm.resetFields();
    },
    jumpBtn(code) {
      this.isShowMt = true;
      this.mtObj = [];
      this.$refs.mtForm.resetFields();
      this.showMt = false;
      this.$router.push({ name: "AreaReserve", query: { code } });
    },
    verificationCodeb() {
      this.$refs.mtForm.validate((v) => {
        if (v) {
          checkCouponByInput({
            param: {
              code: this.mtForm.tgm,
              venueId: sessionStorage.getItem("venueId"),
            },
          })
            .then((res) => {
              if (res.errorCode === "000000") {
                this.isShowMt = true;
                this.mtObj = res.record;
              } else {
                this.isShowMt = false;
              }
            })
            .catch(() => {
              this.isShowMt = false;
            });
        }
      });
    },
    verificationCode() {
      const code = this.activeTicketItem.code;
      const { activeTicketItem, verificatNum, verificatPrint } = this;
      if (!code) {
        this.$message.warning(this.$t("message.qhqkypj"));
        return;
      }
      this.ticketLoading = true;
      getCheckCode({
        param: {
          code: this.enterWriteOffFrom.code || code,
          num: verificatNum,
          venueId: sessionStorage.getItem("venueId"),
        },
      })
        .then((res) => {
          this.ticketLoading = false;
          if (res.errorCode !== "000000") return;
          this.$message.success(this.$t("message.hxcg"));
          this.showEnterWriteOff = false;
          if (verificatPrint) {
            let templateCode = "";
            if (activeTicketItem.type === "42") {
              templateCode = "INOUT_TICKET";
            } else if (activeTicketItem.type === "32") {
              templateCode = "INOUT_SITE";
            } else if (activeTicketItem.type === "41") {
              templateCode = "INOUT_MEALS";
            } else {
              templateCode = "INOUT_DEFAULT";
            }
            console.log(templateCode, "进场核销打印信息", code);
            if (window.Android) {
              Android.printInOut(
                templateCode,
                res.record.orderId,
                "",
                code,
                activeTicketItem.name,
                activeTicketItem.useTime || "",
                verificatNum || 1
              );
              return;
            }
            this.isPrint = true;
            printOrder({
              param: {
                type: 0,
                num: verificatNum,
                useTime: activeTicketItem.useTime || "",
                qrCode: code,
                workId: res.record.orderId || "",
                productName: activeTicketItem.name,
                templateCode,
                venueId: sessionStorage.getItem("venueId"),
              },
            }).then((resP) => {
              if (resP.errorCode === "000000") {
                if (
                  resP.errorCode === "000000" &&
                  resP.record &&
                  resP.record.isPrint === "1" &&
                  resP.record.dataList &&
                  resP.record.dataList.length > 0
                ) {
                  resP.record.dataList.forEach((item) => {
                    this.$refs.VerificationTemRef.obj = { ...item };
                    setTimeout(() => {
                      this.$refs.VerificationTemRef.print();
                    }, 300);
                    setTimeout(() => {
                      this.isPrint = false;
                    }, 500);
                  });
                } else {
                  this.ticketLoading = false;
                  this.isPrint = false;
                }
              } else {
                this.ticketLoading = false;
                this.isPrint = false;
                this.$message.success(this.$t("message.dycg"));
              }
            });
          }
          // this.enterWriteOffFrom.detail = res.record
        })
        .catch(() => {
          this.ticketLoading = false;
          this.isPrint = false;
          this.$message.success(this.$t("message.dycg"));
        });
    },
    verificationCodec() {
      const ids = [...this.activeTicketList];
      if (!ids || ids.length === 0) {
        return this.$message.warning(this.$t("message.qhqkypj"));
      }
      this.activityLoading = true;
      batchHXSign({
        param: {
          ids,
          type: "0",
        },
      })
        .then((res) => {
          this.activityLoading = false;
          if (res.errorCode !== "000000") return;
          this.$message.success(this.$t("message.hxcg"));
          this.showActivityWriteOff = false;
        })
        .catch(() => {
          this.activityLoading = false;
        });
    },
    changePrint() {
      if (this.verificatPrint) {
        localStorage.setItem("isPrint", JSON.stringify(this.verificatPrint));
      } else {
        localStorage.removeItem("isPrint");
      }
    },
    outinRecord() {
      this.showEnterWriteOff = false;
      this.$router.replace({ name: "MemberInOutRecord" });
    },
    outinRecordb() {
      this.showActivityWriteOff = false;
      this.$router.replace({ name: "SignRecordList" });
    },
    qkBtn() {
      this.mtForm.tgm = "";
    },
  },
  beforeDestroy() {
    // 在组件销毁前清除可能存在的定时器
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.posi {
  position: absolute;
  bottom: 38px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  width: 93%;
  align-items: center;
}
.member_active {
  border: 1px solid #435ebe !important;
  background: #f4f7fc;
}
.member_box {
  width: 100%;
  padding: 0px 20px 20px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  //   background: #fff;
  .member_item_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border: 1px solid #dfe2e8;
    margin-bottom: 10px;

    .member_item {
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      // margin-top: 10px;
      width: 48%;
      display: flex;
      flex-direction: column;
      position: relative;
      // background: #fff;
      // padding: 10px;
      .tp {
        position: absolute;
        right: 0;
        top: 0;
        //   background: #;
        color: #fff;
        background: #00ba92;
        width: 42px;
        text-align: center;
        color: #fff;
        border-radius: 5px 1px 0px 5px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.member_boxs {
  width: 100%;
  //   padding: 0px 20px 20px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  //   background: #fff;
  .member_item_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border: 1px solid #dfe2e8;
    margin-bottom: 10px;
    padding: 0 10px 10px 10px;
    .member_item {
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      // margin-top: 10px;
      width: 48%;
      display: flex;
      flex-direction: column;
      position: relative;
      // background: #fff;
      // padding: 10px;
      .tp {
        position: absolute;
        right: 0;
        top: 0;
        //   background: #;
        color: #fff;
        background: #00ba92;
        width: 42px;
        text-align: center;
        color: #fff;
        border-radius: 5px 1px 0px 5px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.Entr_list_warp {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  .item {
    width: 142px;
    height: 128px;
    text-align: center;
    margin: 10px 10px;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    text-align: center;
    position: relative;
    padding: 16px 10px;
    .img {
      width: 50px;
      height: 50px;
      margin-bottom: 16px;
    }
    .drag {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
    }
    .checkbox {
      position: absolute;
      top: 4px;
      right: 4px;
    }
  }
  .itemMy {
    width: 102px;
    height: 136px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    .img_wrap {
      width: 100px;
      height: 100px;
      background-color: #f5f7fc;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 60%;
        height: 60%;
      }
      .drag {
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
      }
      .checkbox {
        position: absolute;
        top: 4px;
        right: 4px;
      }
    }
    .text {
      height: 32px;
      line-height: 32px;
      background-color: #fff;
    }
  }
}
.default_notickets {
  display: flex;
  flex-direction: column;
  width: 12%;
  justify-content: center;
  align-items: center;
  margin: 100px auto;
}
.verificat_info_wrap {
  .verificat_info-main {
    display: flex;

    .left {
      flex: 1;
      overflow: auto;
      height: 380px;
      margin-right: 20px;

      .info_item {
        cursor: pointer;
        padding: 6px 12px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #dfe2e8;

        h2 {
          padding: 5px 0;
          margin: 0;
          font-size: 16px;
        }

        .line {
          display: flex;
          padding: 5px 0;

          .span6 {
            flex: 5;
            margin-right: 10px;
          }

          .span4 {
            flex: 5;
          }
        }
      }

      .active {
        border: 1px solid #435ebe;
        background: #f4f7fc;
      }

      .default_noticket {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 160px;
        }
      }
    }

    .right {
      width: 280px;
      height: 380px;
      background-color: #f4f7fc;
      padding: 20px;

      .head_wrap {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .wrap {
          flex: 1;

          .name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
          }

          .phone {
            color: #666666;
          }
        }
      }

      .line {
        margin-top: 20px;

        .key {
          display: inline-block;
          // width: 70px;
        }
      }
    }
  }
}
.verificat_footer {
  text-align: left;
  display: flex;
  justify-content: space-between;
  .verificat_num_wrap {
    flex: 1;
  }
}

.canvas {
  box-sizing: content-box;
  background-color: rgba(25, 67, 169, 0.12);
  border-radius: 100%;
  position: relative;
  /* border: 10px solid #435EBE; */
}

.app-main-container {
  background-color: transparent;
}

.initial-config {
  text-align: center;
  cursor: pointer;
  margin-right: 20px;

  .cnfig-icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }

  .title {
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
}

.entrance-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // justify-content: space-between;
  margin: 0 -15px;
  margin-bottom: 18px;
  .entrance-item {
    width: calc((100% - 180px) / 6);
    margin: 0 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f7fc;
    color: #222;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;

    &:hover {
      box-shadow: 0 0 5px 1px $menuActive;
    }

    .icon {
      margin-bottom: 20px;
      width: 44px;
    }

    &:last-of-type {
      margin-right: 0;
    }
  }
}

.data-show {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  .item {
    background-color: #f4f7fc;
    width: calc((100% - 90px) / 4);
    border-radius: 8px;
    padding: 30px;
    font-size: 14px;
    color: #333;

    .title {
      font-size: 18px;
      margin-bottom: 28px;
      font-weight: bold;
    }

    .unit-money {
      display: flex;
      justify-content: space-between;

      .num {
        font-size: 18px;
        color: $menuActive;
        font-weight: bold;
        margin-left: 10px;
      }
    }
  }
}

.charts-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .chart-area-booking-box,
  .chart-combo-sell-box,
  .chart-tickets-sell-box {
    height: 380px;
    background-color: #f4f7fc;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    border-radius: 8px;
    .ab_btn {
      position: absolute;
      top: 0;
      right: 0;
      background-color: $primaryColor;
      color: #fff;
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 0 8px 0 8px;
      cursor: pointer;
    }
  }

  .chart-area-booking-box,
  .chart-combo-sell-box {
    width: calc((100% - 30px) / 2);
  }

  .chart-tickets-sell-box {
    width: 100%;
  }

  .chart-area-booking {
    flex: 1;
    height: 250px;
    margin: -25px 0;
    display: flex;
    align-items: center;
  }

  .chart-combo-sell {
    height: 240px;
  }

  .chart-tickets-sell {
    height: 240px;
  }

  .title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 20px;
  }
}

.chart-title {
  /* border-bottom: solid 1px #DFE2E8; */
  margin-bottom: 30px;
  height: 38px;
  align-items: center;
  padding-bottom: 10px;
}

.enterWriteOffCode {
  display: flex;
}

.order-type {
  font-weight: 500;
}

.error-style {
  color: #ff4634;
}
.member_info {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  .item {
    width: 50%;
    line-height: 28px;
    height: 28px;
  }
}
.member_infos {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 2px;
  //   padding: 16px;
  margin-top: 10px;
  .item {
    width: 50%;
    line-height: 28px;
    height: 28px;
  }
}
</style>
